<template>
  <div class="bg">
    <nav-com title="" :showView="true" @back="backHandler()">
      <div
        v-if="userInfo.is_leader_up == 1"
        @click="viewProgress()"
        style="font-size: 14px; color: #f86931"
      >
        查看申请进度
      </div></nav-com
    >
    <div :class="userInfo.is_leader_up == 1 ? 'bg' : 'bg1'">
      <div
        style="position: fixed; top: 50vh; width: 100%"
        v-if="userInfo.is_leader_up == 0"
      >
        <div class="buttonLuck" @click="submitApply()" v-if="userInfo.is_leader_up == 0">
          我要申请独立负责人
        </div>
      </div>
      <div class="num" style="display: block" v-if="userInfo.is_leader_up == 1">
        <div class="item-list">
          <div
            class="item"
            style="background: rgba(215, 215, 215, 0.4); color: #fff"
          >
            <div class="item1" style="color: #872118; font-size: 15px">
              团队总人数
            </div>
            <div class="item3" style="color: #872118">
              {{ data.all_nums }}人
            </div>
          </div>
        </div>
        <div
          class="item-list"
          style="border-bottom: 1px solid rgba(195, 37, 38, 0.12)"
        >
          <div class="item">
            <div class="item1">银牌经销商</div>
            <div class="item3">{{ data.all_yin }}</div>
            <div class="item4">人数</div>
          </div>
          <div class="split"></div>
          <div class="item">
            <div class="item1">二星网店主</div>
            <div class="item3">{{ data.all_xing2 }}</div>
            <div class="item4">人数</div>
          </div>
          <div class="split"></div>
          <div class="item">
            <div class="item1">一星网店主</div>
            <div class="item3">{{ data.all_xing1 }}</div>
            <div class="item4">人数</div>
          </div>
        </div>
        <div class="item-list">
          <div class="item">
            <div class="item1">代言人</div>
            <div class="item3">{{ data.all_daiyan }}</div>
            <div class="item4">人数</div>
          </div>
          <div class="split"></div>
          <div class="item">
            <div class="item1">推广员</div>
            <div class="item3">{{ data.all_tuiguang }}</div>
            <div class="item4">人数</div>
          </div>
        </div>
      </div>
      <div
        style="position: fixed; bottom: 20px; width: 100%"
        v-if="userInfo.is_leader_up == 1"
      >
        <div class="buttonLuck"  @click="OpenPdf">
          查看操作文档 >>
        </div>
        <div
          style="
            font-size: 14px;
            margin: 0 20px;
            color: #872118;
            margin-top: 10px;
            display: flex;
          "
        >
          <div style="min-width: 50px; text-align: center">说明：</div>
          <div>如果打开速度过慢，请在WIFI环境下打开观看</div>
        </div>
      </div>
    </div>

    <van-popup v-model="show">
      <div class="popup">
        <div style="color: #000000; line-height: 70px; font-size: 18px">
          我要申请成为独立负责人
        </div>
        <div  v-if="operType==1" class="step1" style="color:#737373;font-size:15px;margin:15px">
          亲，您确定要成为独立节点负责人吗？独立节点负责人需要进行短信验证码验证，并需要有负责人审批，请申请后，及时联系负责人审批通过~
        </div>
        <div  v-if="operType==2"
          class="step2"
          style="
            width: 80%;
            justify-content: flex-start;
            display: flex;
            margin: 0 25px;
            flex-direction: column;"
        >
          <div style="color: #656565">手机号:{{userMobile}}</div>
          <div>
            <van-cell-group inset>
              <van-field
                v-model="captcha"
                center
                border
                clearable
                placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" :class="!codeFalg?'beenSend':''"      @click="codeHandler"
                    >  {{ codeText }}</van-button>
                </template>
              </van-field>
            </van-cell-group>
            <div style="color: #fe4b20; font-size: 13px">
            {{tips}}
            </div>
          </div>
          <div></div>
        </div>
        <div class="step3" v-if="operType==3"  style="color:#737373;font-size:15px;margin:15px">
          亲，您确定要放弃成为独立负责人吗？
        </div>
        <div
          class="btn"
          style="display: flex; justify-content: space-around; width: 80%; margin: 20px; 0"
        >
          <div
            style=" border: 1px solid #fe4b20;
              color: #fe4b20;
              padding: 12px 45px;
              border-radius: 2px; "
              @click="cancel()"
          >
            取消
          </div>
          <div
            style="background-color: #fe4b20;
              color: #fff;
              padding: 12px 45px;
              border-radius: 2px;"
              @click="confirm()"
          >
            确认
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showvideo">
      <div class="popup">
        <div style="color: #000000; line-height: 70px; font-size: 18px">
          操作说明制作中
        </div>
        <div  class="step1" style="color: rgb(115, 115, 115); font-size: 14px; margin: 0 55px;text-align: center;">
          亲，操作说明制作中，请稍等~~
        </div>

        <div
          class="btn"
          style="display: flex; justify-content: space-around; width: 80%; margin: 20px; 0"
        >
          <div
            style=" border: 1px solid #fe4b20;
              color: #fe4b20;
              padding: 12px 45px;
              border-radius: 2px; "
              @click="showvideo = false"
          >
            我知道了
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import {
  getOrderNum,
  managerAnalysis,
  getTeamData,
  getFttusers2,
  setLeader,
  getFttuserUserId2,
  score_send,
  dependentApplyStatus
} from "@/api/api";
import { Toast } from "vant";
import { Popup, uLine } from "vant";
const config = {
  headers:{
    'Authorization': localStorage.getItem("token"),
    'token': localStorage.getItem("token")
  }
};

export default {
  components: {
    navCom,
  },
  data() {
    return {
      showvideo:false,
      operType:1,
      codeText:"发送验证码",
      captcha:"",
      codeFalg:true,
      show: false,
      userInfo: {},
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      num5: 0,
      codeError:0,
      list: [],
      data: {
        is_leader: -1,
      },
      userMobile: "",
      tips:""
    };
  },
  mounted() {
    this.initData();
    this.init();
    getFttuserUserId2().then((res) => {
      console.log("getFttuserUserId2", res);
      if (res.data.code == 1) {
        let cellphone = res.data.data.mobile;
        this.userMobile = cellphone;
      }
    });
  },
  methods: {
    submitApply(){
      if(this.userInfo.is_leader_up ==1){
          Toast("已申请");
      }else{
        this.show = true;
      }
    },
    OpenPdf(){
      // window.open('https://oss.bigchun.com/ryt/look_sep_teams.pdf')
      this.$router.push('/doct')
    },
    init() {
      this.LOADING = true;
      let urls = `${localStorage.getItem("share_weixin_shareurl")}/api/share/getuser`
      this.$axios.post(urls,{ wallet_type: "mutual" },config).then(res=>{
        this.LOADING = false;
        if(res.data.code == 1){
          this.dataInfo = res.data.data;
        }else{
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
    },
    cancel(){
      if(this.operType==3){
        this.operType = 2
      }else if (this.operType==2){
        this.operType = 3
      } else{
            this.show=false;
            setTimeout(() => {
              this.operType=1;
            }, 1000);
      }
    },
    confirm() {
      if(this.operType==1){
        this.operType=2
      }else if(this.operType==2){
        setLeader({
          captcha:this.captcha
        }).then((result) => {
          console.log("setLeader",result);
          Toast(result.data.msg);
          if(result.data.msg.indexOf("验证码")!=-1){
            this.tips="验证码输入错误，超过3次账号将被锁定，请 重新获取验证码";
          }else{
            this.init();
            this.show=false;
            setTimeout(() => {
              this.operType=1;
            }, 1000);
          }
        // setTimeout(() => {
        //   this.backHandler();
        // }, 2000);
      });
      }
      if(this.operType==3){
        this.show=false;
        setTimeout(() => {
          this.operType=1;
        }, 1000);
      }

    },
    confirmLuck() {
      console.log("confirmLuck");
      this.show = true;
    },
    initData() {
      getTeamData()
        .then((result) => {
          console.log("getTeamData", result.data.data);
          this.data = result.data.data;
          // this.num1 = result.data.data.list[1];
          // this.num2 = result.data.data.list[2];
          // this.num3 = result.data.data.list[3];
          // this.num4 = result.data.data.list[4];
          // this.num5 = result.data.data.list[5];
          // this.list = result.data.data.data;
        })
        .catch((err) => {});
    },
       //获取验证码
   codeHandler() {
      let that = this;
      let telLen = this.userMobile.length;
      if (telLen == 11) {
        let time = null;
        clearInterval(time);
        that.codeFalg = false;
        let t = 60;
        time = setInterval(function () {
          t--;
          that.codeText = "重新获取"+t+"S";
          if (t <= 0) {
            that.codeText = "获取验证码";
            that.codeFalg = true;
            clearInterval(time);
          }
        }, 1000);

        score_send({
          mobile: this.userMobile,
        }).then((res) => {
          if (res.data.code == 1) {
            Toast("验证码已发送")
            this.tips="已发送验证码至:"+this.userMobile
          } else {
            this.$dialog.alert({
              message: res.data.msg,
            });
          }
        });
        return true;
      } else {
        this.message = "请输入正确手机号";
        return false;
      }
    },
    async transfer() {
      console.log(this.$route.params.id);
      if (!this.mobile.trim()) {
        Toast("请输入对方手机号");
      } else {
        const res = await couponIncrease({
          library_id: this.$route.params.id,
          mobile: this.mobile,
          sum: this.num,
          captcha: this.captcha,
        });
        Toast(res.data.msg);
        if (res.data.code == 1) {
          this.backHandler();
        }
      }
    },
    backHandler() {
      this.$router.go(-1);
      // if (weixin.isAndroid()) {
      //   window.JS_TROOPS.goBack();
      // } else {
      //   this.$router.go(-1);
      // }
    },
    viewProgress(){
        dependentApplyStatus()
          .then((result) => {
            console.log("dependentApplyStatus", result);
            if (result.data.code == 1) {
              this.$router.push('/progress')
            } else {
              Toast("暂无申请记录");
            }
          })
          .catch((err) => { });

    }
  },
};
</script>

<style scoped>
/deep/.back_text1 {
  width: auto;
}
/deep/ .van-cell-group--inset {
  margin: 0;
}
/deep/ .van-cell {
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 0px;
  margin: 10px 0;
}
/deep/ .van-field__control {
  padding-left: 10px;
}

/deep/ .van-hairline--top-bottom::after,
.van-hairline-unset--top-bottom::after {
  border-width: 1px 0;
  border: transparent;
}
.beenSend{
  background-color: #FEAD99!important;
  border: 1px solid #FEAD99!important;
  color: #FFFFFF;
}
/deep/ .van-button--small {
  background-color: #fe4b20;
  border: 1px solid #fe4b20;
  height: 45px;
  border-radius: 0px 10px 10px 0px;
  padding: 0 20px;
  font-size: 13px;
}

body {
  overflow: hidden;
}

.buttonLuck {
  color: white;
  line-height: 10vw;
  text-align: center;
  font-size: 15px;
  border-radius: 5vw;
  width: 200px;
  line-height: 44px;
  background: #872118;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 15vh;
}
.button {
  color: #fff;
  line-height: 10vw;
  text-align: center;
  border-radius: 5vw;
  width: 160px;
  line-height: 44px;
  background: #fe4b20;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 2vh;
}
.bg {
  position: relative;
  height: 100vh;
  background: url("../../assets/my/sharesBG.jpg");
  background-size: 100% 100%;
  overflow: hidden;
}
.bg1 {
  position: relative;
  height: 100vh;
  background: url("../../assets/my/sharesBG1.png");
  background-size: 100% 100%;
  overflow: hidden;
}
.num {
  width: 90vw;
  background: rgba(195, 37, 38, 0.12);
  /* opacity: 0.12; */
  border-radius: 12px;
  margin: 0 auto;
  margin-top: 28vh;
  border-radius: 3vw;
  display: flex;
  color: #872118;
  flex-direction: column;
  /* padding: 10px; */
}
.item-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  /* color: #fff; */
  color: #872118;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  flex: 1;
}
.item1 {
  line-height: 20px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  display: flex;
}
.item2 {
  line-height: 15px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 500;
  /* color: #872118; */
}
.item3 {
  /* width: 79px; */
  line-height: 36px;
  font-size: 23px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  /* color: #872118; */
}
.item4 {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  /* color: #872118; */
  line-height: 15px;
}
.split {
  width: 0.5px;
  height: 60px;
  background: #872118;
  opacity: 0.15;
}
.van-popup {
  background-color: transparent !important;
}
.popup {
  width: 90vw;
  background-image: url(../../assets/xyrybg.png);
  background-repeat: round;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.popup .item1 {
  /* width: 336px; */
  height: 24px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-style: italic;
  color: #95613d;
  line-height: 42px;
}
.popup .item2 {
  height: 42px;
  font-size: 21px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #8d562f;
  line-height: 50px;
  text-shadow: 0px 5px 3px rgba(193, 133, 68, 0.29);
}
.popup .item3 {
  height: 21px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #97480f;
  line-height: 35px;
  display: flex;
  align-items: center;
}
.popup .item3 img {
  margin-left: 5px;
}
.popup .item4 {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  /* line-height: 44px; */
  margin-top: 35px;
  background: linear-gradient(
    0deg,
    rgba(249, 236, 135, 0.76) 0%,
    rgba(238, 174, 91, 0.76) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popup .item5 {
  height: 19px;
  font-size: 5px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  opacity: 0.27;
  transform: scale(0.8);
}
</style>
